<template>
  <div class="man">
    <div class="handle">
      <div class="menu">
        <el-timeline>
          <el-timeline-item placement="top">
            <el-card>
              <h4>添加考试信息</h4>
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="160px"
                class="demo-ruleForm"
              >
               <el-form-item label="考试科目" prop="invname">
                  <el-select
                    v-model="ruleForm.value"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择考试名称"
                  >
                    <el-option
                      v-for="item in subject"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="考试名称" prop="invname">
                  <el-select
                    v-model="ruleForm.value"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择考试名称"
                  >
                    <el-option
                      v-for="item in examName"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="考试开始时间" prop="invstarttime">
                  <el-date-picker
                    @change="bundleStartTime"
                    v-model="ruleForm.starttime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :picker-options="pickerOptions"
                  ></el-date-picker>---
                  <el-date-picker
                    @change="bundleEndTime"
                    v-model="ruleForm.endtime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :picker-options="pickerOptions"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="考试时长" prop="timeLong">
                  <el-input-number
                    v-model="ruleForm.timeLong"
                    controls-position="right"
                    @change="handleChange"
                    :min="0"
                    :max="180"
                  ></el-input-number>&#160; 分钟
                </el-form-item>
                <el-form-item label="培训报名时间" prop="appstarttime">
                  <el-date-picker
                    @change="appStart"
                    v-model="ruleForm.appstart"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :picker-options="pickerOptions"
                  ></el-date-picker>---
                  <el-date-picker
                    @change="appEnd"
                    v-model="ruleForm.append"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :picker-options="pickerOptions"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import "@/mock/Admin";
import Message from "@/plugins/message";
import $ from "jquery";
import { formatDate } from "@/common/util/date";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      // form: {
      //   name: "",
      //   region: "",
      //   date1: "",
      //   date2: "",
      //   delivery: false,
      //   type: [],
      //   resource: "",
      //   desc: ""
      // },
      subject: [
        {
          value: "HTML",
          label: "HTML"
        },
        {
          value: "CSS",
          label: "CSS"
        },
        {
          value: "JavaScript",
          label: "JavaScript"
        }
      ],
      examName: [
        {
          value: "HTML",
          label: "HTML"
        },
        {
          value: "CSS",
          label: "CSS"
        },
        {
          value: "JavaScript",
          label: "JavaScript"
        }
      ],
      // value: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      // starttime:"",
      // endtime:"",
      invstarttime: "",
      invendtime: "",
      appstarttime: "",
      appendtime: "",
      options: [
        {
          dept: "选项1",
          label: "信息科学与工程学院"
        },
        {
          dept: "选项2",
          label: "软件学院"
        },
        {
          dept: "选项3",
          label: "外国语学院"
        },
        {
          dept: "选项4",
          label: "数学学院"
        },
        {
          dept: "选项5",
          label: "物理学院"
        }
      ],
      ruleForm: {
        invname:"",
        starttime: "",
        endtime: "",
        timeLong: 0,
        appstart: "",
        append: "",
        value:[]
      },
      rules: {
        teano: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 6, max: 6, message: "长度为 6 个字符", trigger: "blur" }
        ],
        teaname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度为 2 到 4 个字符", trigger: "blur" }
        ],
        passwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度为 6 到 12 个字符", trigger: "blur" }
        ],
        teasex: [{ required: true, message: "请选择性别", trigger: "change" }],
        teatel: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    bundleStartTime() {
      this.invstarttime = this.parseTime(this.ruleForm.starttime);
      console.log(this.invstarttime);
    },
    bundleEndTime() {
      this.invendtime = this.parseTime(this.ruleForm.endtime);
      console.log(this.invendtime);
      let starttimestamp = new Date(this.ruleForm.starttime).getTime();
      let endtimestamp = new Date(this.ruleForm.endtime).getTime();
      let timeLong = (endtimestamp - starttimestamp) / (1000 * 60);
      if (timeLong < 0) {
        Message.error("考试时间有误");
      } else {
        this.ruleForm.timeLong = timeLong;
      }
    },
    appStart() {
      this.appstarttime = this.parseTime(this.ruleForm.appstart);
      console.log(this.appstarttime);
    },
    appEnd() {
      this.appendtime = this.parseTime(this.ruleForm.append);
      console.log(this.appendtime);
      // let starttimestamp =  new Date(this.appstarttime).getTime();
      // let endtimestamp = new Date(this.appendtime).getTime();
      // let timeLong = (endtimestamp - starttimestamp) / (1000*60);
      // if(timeLong < 0){
      //   Message.error("培训报名时间有误")
      // }
    },
    handleChange(value) {
      let timestamp = new Date(this.ruleForm.starttime).getTime() + value * 1000 * 60;
      let date = new Date(timestamp);
      this.ruleForm.endtime = formatDate(date, "yyyy-MM-dd hh:mm");
      this.invendtime = this.ruleForm.endtime;
      console.log(this.ruleForm.endtime);
    },
    parseTime(time) {
      let d = new Date(time);
      let resDate =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      let resTime =
        this.p(d.getHours()) +
        ":" +
        this.p(d.getMinutes()) +
        ":" +
        this.p(d.getSeconds());
      return resDate + " " + resTime;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post("Admin/add", 
          { invname: this.invname}).then(res => {
            const { code, msg } = res.data;
            if (code === 0) {
              Message.success(msg);
              this.$router.push("/member/index");
            } else {
              Message.error("添加失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.ruleForm.starttime = "";
      this.ruleForm.endtime = "";
      this.ruleForm.value = [];
      this.ruleForm.appstart = "";
      this.ruleForm.append = "";
      this.ruleForm.timeLong = 0;
    }
  }
};
</script>
<style scoped>
.man {
  position: relative;
  /* border: 1px solid black; */
}
.man .handle {
  /* position: absolute; */
  width: 860px;
  margin: 0 auto 20px;
}
</style>